<template>
    <div id="videoRecord">
    	<Table border :columns="recordCol" :data="showRecord"></Table>
	    <Page :total="recordTotal" :page-size="10" :page="page" show-elevator show-total  style="text-align:center;margin-top:10px;" @on-change="changePage"/>
    </div>
</template>
<script>
	import {videoLearnStatictics} from '@/api/selfStudy/class.js'
    export default {
    	name:'answerRecord',
    	props:['classNumberId'],
        components:{},
        data () {
            return {
				recordList:[],
				recordTotal:0,
				page:1,
				pageSize:10,
				recordCol:[ //学员 视频名称 是否已看
				    { 
						title: '序号',
                        align: 'center',
						width:60,
						render:(h,params) => {
                        	let index = (this.page-1)*10 + params.row._index + 1
                        	return h('span',index)
                        }
					},
					{
						title:'学员昵称',
						key:'studentName'
					},
					{
						title:'课件名',
						key:'ecName'
					},
					{
						title:'视频',
						key:'expVideoName'
					},
					{
						title:'是否已看',
						key:'',
						render:(h,params) => {
							return h('Tag',{
								props:{
								   color:params.row.finished == '1' ? 'success' :'default',
								   type:"border"
								}
							},params.row.finished == '1' ? '是' : '否' )
						}
					}
				]
            }
        },
        computed:{
			showRecord(){
				return this.recordList.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
			}
        },
        watch:{
			classNumberId:function(val) {
				this.getAnswerRecord();
			}
        },
        filters:{

        },
        created(){

        },
        mounted(){
			this.getAnswerRecord();
        },
        methods:{
			getAnswerRecord(){
				videoLearnStatictics(this.classNumberId).then(data => {
					if(data.code == 1){
						this.recordList = data.data;
						this.recordTotal = this.recordList.length;
					}else{
						this.$Message.warning(data.message);
					}
				}).catch(error => {
					this.$Message.error(error.message);
				})
			},
			changePage(page){
				this.page = page;
			}
        }
    }
</script>
<style scoped>

</style>
